<template>
  <div id="homepage">
    <div style="height: 78px"></div>


    <!--<p id="pp">选项1</p>-->
    <!--<div class="panel-body">-->
    <!--<p>{{ count }}</p>-->
    <!--<p>-->
    <!--<button @click="increment">+</button>-->
    <!--<button @click="decrement">-</button>-->
    <!--</p>-->
    <!--</div>-->
    <div class="ImgK">
      <div class="main">
        <div class="mainTitle">
          <div class="swiper">
            <swiper :options="swiperOption" ref="mySwiper">
              <swiper-slide v-for="str in img">
                <img :src="str.url" style="height:100%;width: 100%"/>
              </swiper-slide>
            </swiper>
          </div>
          <div class="mainTitleTop">
            <p>mv - 精选</p>
          </div>
          <div class="container-fluid">
            <div class="row">
              <div class="col-lg-3 col-sm-6" v-for="item in sImg">
                <div class="colLeft">
                  <div class="colLeftImg">
                    <img :src="item.url" class="colLeftImgs">
                  </div>
                  <div class="colLeftBootm">
                    <p class="colLeftBootmTitle">捕鸟蛛</p>
                    <p class="colLeftBootmTitles">详细：捕鸟蛛属于较原始之蜘蛛，其全身密生细毛。</p>
                  </div>
                </div>
              </div>
            </div>
          </div>
          <div class="mainTitleTop">
            <p>更多>></p>
          </div>
        </div>


        <!--<div class="title">MV-精选</div>-->
        <!--<div class="rowMain" v-for="item in sImg">-->
        <!--<img :src="item.url" style="width: 100%;height: auto">-->
        <!--</div>-->
      </div>
    </div>
  </div>
</template>

<script>
  import {mapState} from 'vuex'
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  export default {
    components: {
      swiper,
      swiperSlide,
    },
    data () {
      return {
        localCount: 2,
        value2: 0,
//        轮播
        img: [
          {
            url: '../../../static/img/homepage/timg6.png',
          },
          {
            url: '../../../static/img/homepage/timg6.png',
          },
          {
            url: '../../../static/img/homepage/timg6.png',
          },
          {
            url: '../../../static/img/homepage/timg6.png',
          },
        ],
//        栅格化图片
        sImg: [
          {
            url: '../../../static/img/homepage/ss.png',
            h3: '辐射捕鸟蛛',
            p: '属于较原始之蜘蛛，其全身密生细毛。',
          },
          {
            url: '../../../static/img/homepage/ss.png',
            h3: '辐射捕鸟蛛',
            p: '属于较原始之蜘蛛，其全身密生细毛。',
          },
          {
            url: '../../../static/img/homepage/ss.png',
            h3: '辐射捕鸟蛛',
            p: '属于较原始之蜘蛛，其全身密生细毛。',
          },
          {
            url: '../../../static/img/homepage/ss.png',
            h3: '辐射捕鸟蛛',
            p: '属于较原始之蜘蛛，其全身密生细毛。',
          },
          {
            url: '../../../static/img/homepage/ss.png',
            h3: '辐射捕鸟蛛',
            p: '属于较原始之蜘蛛，其全身密生细毛。',
          },
          {
            url: '../../../static/img/homepage/ss.png',
            h3: '辐射捕鸟蛛',
            p: '属于较原始之蜘蛛，其全身密生细毛。',
          },
          {
            url: '../../../static/img/homepage/ss.png',
            h3: '辐射捕鸟蛛',
            p: '属于较原始之蜘蛛，其全身密生细毛。',
          },
          {
            url: '../../../static/img/homepage/ss.png',
            h3: '辐射捕鸟蛛',
            p: '属于较原始之蜘蛛，其全身密生细毛。',
          },
          {
            url: '../../../static/img/homepage/ss.png',
            h3: '辐射捕鸟蛛',
            p: '属于较原始之蜘蛛，其全身密生细毛。',
          },
          {
            url: '../../../static/img/homepage/ss.png',
            h3: '辐射捕鸟蛛',
            p: '属于较原始之蜘蛛，其全身密生细毛。',
          },
          {
            url: '../../../static/img/homepage/ss.png',
            h3: '辐射捕鸟蛛',
            p: '属于较原始之蜘蛛，其全身密生细毛。',
          },
          {
            url: '../../../static/img/homepage/ss.png',
            h3: '辐射捕鸟蛛',
            p: '属于较原始之蜘蛛，其全身密生细毛。',
          },
          {
            url: '../../../static/img/homepage/ss.png',
            h3: '辐射捕鸟蛛',
            p: '属于较原始之蜘蛛，其全身密生细毛。',
          },
          {
            url: '../../../static/img/homepage/ss.png',
            h3: '辐射捕鸟蛛',
            p: '属于较原始之蜘蛛，其全身密生细毛。',
          },
          {
            url: '../../../static/img/homepage/ss.png',
            h3: '辐射捕鸟蛛',
            p: '属于较原始之蜘蛛，其全身密生细毛。',
          },
          {
            url: '../../../static/img/homepage/ss.png',
            h3: '辐射捕鸟蛛',
            p: '属于较原始之蜘蛛，其全身密生细毛。',
          },
        ],
        swiperOption: {
          grabCursor: true,
          autoplay: true,//可选选项，自动滑动
          initialSlide: 0,
          loop: true,
          speed: 400,
          autoplayDisableOnInteraction: false,
          observer: true,//修改swiper自己或子元素时，自动初始化swiper
          observeParents: true,//修改swiper的父元素时，自动初始化swiper
          type: 'bullets',

        }

      }
    },
    computed: {
      count(){
        return this.$store.state.count
      },
    },
    created(){



    },
    methods: {
      increment(){
        this.$store.commit('increment')
      },
      decrement(){
        this.$store.commit('decrement')
      }
    }
  }
</script>

<style scoped>
  @import "index.css";

</style>
